<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/root.css"/>
    <link rel="stylesheet" type="text/css" href="css/account/user.css"/>
    <link rel="stylesheet" type="text/css" href="css/address/address.css"/>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js?ver=2.0.4" charset="utf-8"></script>
    <script type="text/javascript" src="js/underscore-min.js"></script>
    <script src="js/base/api.js"></script>
    <script src="js/base/base.js"></script>
    <script src="js/vue/vue.js"></script>
    <script src="cordova.js"></script>

    <script type="text/javascript" src="js/magiclamp.js?ver=2.0.3" charset="utf-8"></script>
    <script src="js/express_template/host_express_item_template.js"></script>

</head>
<body>
<div id="host_express_item_html">
    <header>
        <a @click="page_back" v-if="baseConfig.is_phone" class="h-left back-btn">
            <i class="iconfont icon-fanhui"></i>
        </a>
        <h1 class="h-title">运费模板管理 </h1>
    </header>
    <div id="root" class="h-t-bar">
        <!--用户操作列表-->
        <div class="address-content " style="margin: .5rem">
            模板名称：{{selected_express_name}}
        </div>
        <div class="add-list" v-if="is_select_address">
            <form  class="address-container">
                <div class="address-content border-top">
                    <div >请选择省份</div>
                    <div class="right">
                        <div class="btn" @click="clear_select_address()">清空</div>
                        <div class="btn red-font" @click="finish_select_address()">完成</div>
                    </div>
                </div>
                <table width="100%">
                    <tr>
                        <th style="width: 3rem;">选择</th>
                        <th style="text-align: left">省份</th>
                    </tr>
                    <tr v-for="(option, index) in province_list" >
                        <td style="height: 2.5rem" @click="selected_add(index)">
                            <input type="checkbox" :id="'checkbox_'+index" readonly  >
                        </td>
                        <td  @click="selected_add(index)">
                            {{option.name}}
                        </td>
                    </tr>
                </table>

            </form>

        </div>
        <div class="add-list" v-for="express_item in express_item_list"  v-if="!is_select_address&&express_item.is_active">
            <div >
                <div class="address-content border-top">
                    <div v-if="express_item.is_default">默认地址</div>
                    <div v-if="!express_item.is_default">{{express_item.address_list_str}}</div>
                    <div class="right" v-if="!express_item.is_default&&express_is_modefy" >
                        <div class="btn red-font" @click="modefy_express_item_address(express_item)">设置地址</div>
                    </div>
                </div>
                <div class="address-content">
                    <div >首件(个):</div>
                    <div ><input type="number" v-model="express_item.first_num" :readonly="express_is_modefy ? false : 'readonly'" style="max-width: 8rem" @change="change_item(express_item)"></div>
                    <div >运费(元):</div>
                    <div ><input type="number" v-model="express_item.first_price" :readonly="express_is_modefy ? false : 'readonly'" style="max-width: 10rem" @change="change_item(express_item)"></div>

                </div>
                <div class="address-content">
                    <div >续件(个):</div>
                    <div ><input type="number" v-model="express_item.more_num" :readonly="express_is_modefy ? false : 'readonly'" style="max-width: 8rem" @change="change_item(express_item)"></div>
                    <div >运费(元):</div>
                    <div ><input type="number" v-model="express_item.more_price"  :readonly="express_is_modefy ? false : 'readonly'" style="max-width: 10rem" @change="change_item(express_item)"></div>

                </div>

                <div class="address-content">
                    <div style="width: 15%" ><input type="checkbox" v-model="express_item.is_free" :readonly="express_is_modefy ? false : 'readonly'"  @change="change_item(express_item)">满</div>
                    <div style="width: 15%" ><input type="number" v-model="express_item.free_num" :readonly="express_is_modefy ? false : 'readonly'" style="max-width: 4rem"  @change="change_item(express_item)"></div>
                    <div style="width: 65%">件(个)免运费。</div>
                </div>
                <div class="address-content" v-if="!express_item.is_default||express_item.is_change">
                    <div v-if="!express_item.is_change">  </div>
                    <div v-if="express_item.is_change">
                        <div class="btn red-font" @click="modefy_express_item(express_item)"  v-if="express_is_modefy">保存</div>
                    </div>
                    <div class="right" v-if="!express_item.is_default">
                        <div class="btn" @click="delete_express_item(express_item)" v-if="express_is_modefy">删除</div>
                    </div>
                </div>

            </div>
        </div>
        <div class="list-button"  v-if="!is_select_address&&express_is_modefy" >
            <button type="button" @click="create_express_item">新建规则</button>
        </div>
    </div>
</div>
</body>
</html>